<template>
  <div>
    <div class="ShoppingCar">
      <div class="headerbox">
        <div class="header">
          <div class="img" @click="back">
            <svg
              t="1668609623203"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2827"
              width="200"
              height="200"
            >
              <path
                d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"
                fill="#444444"
                p-id="2828"
              ></path>
            </svg>
          </div>
          <div class="text">购物车</div>
          <div class="righttext" @click="editable" v-show="ISshow">编辑</div>

          <div class="righttext" @click="finishbox" v-show="!ISshow">完成</div>
        </div>
      </div>

      <div class="navbox">
        <div class="nav">
          <div class="txt con">电子书({{ lists.length }})</div>
          <div class="txt">商城</div>
        </div>

        <div class="bookbigbox">
          <div class="bookbox" v-for="item in lists" :key="item.bookId">
            <div class="check">
              <input type="checkbox" v-model="item.checked" />
              <!-- <van-checkbox v-model="checked"></van-checkbox> -->
            </div>
            <div class="img">
              <img :src="item.bookCover" alt="" />
            </div>
            <div class="textbox">
              <div class="title">
                <p>{{ item.bookName }}</p>
                <div class="author">
                  {{ item.bookAuthor }}
                </div>
              </div>
              <div class="pricebox">
                <div class="price">￥{{ item.vipPrice }}</div>

                <div class="number">
                  <div class="inputbox">
                    <span>
                      <button type="button" @click="sub(item.bookId)">-</button>
                    </span>
                    <input type="text" :value="item.num" />
                    <span>
                      <button type="button" @click="add(item.bookId)">+</button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部购买 -->
        <div class="footerbox" v-if="lists.length">
          <div class="footer">
            <div class="left">
              <div class="check">
                <input type="checkbox" v-model="checkedAll" />
                <p>{{ text }}</p>
              </div>

              <div class="total" v-show="ISshow">
                合计: <span>￥{{ total }}</span>
              </div>

              <div class="total" v-show="!ISshow">已选中{{ number }}个商品</div>
            </div>

            <div class="right" v-show="ISshow" @click="buybox">购买</div>

            <div class="right" v-show="!ISshow" @click="del">删除</div>
          </div>
        </div>

        <div class="animebox" v-if="!lists.length">
          <div class="anime">
            <div class="img">
              <img src="../assets/img/购物.png" alt="" />
            </div>
          </div>

          <div class="textbox">
            <div class="txtbox">
              <div class="box">
                <p>空空如也~</p>
                <p>马上去填满它吧</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <van-popup class="PopFrame" v-model="show">
        <p>确定删除该商品吗?</p>

        <div class="determine" @click="dell()">确定</div>

        <div class="consider" @click="consider">取消</div>
      </van-popup>
    </div>
  </div>
</template>

<script>


export default {



    data() {
        return {
            text: "全选",

            buy: "购买",

            ISshow: true,
            num: 0,
            show: false,
            txt: "编辑",
            dataList: [],
            list: [],
            listss: [],



            lists: [
                // {
                //     id:1,
                //     checked:false,
                //     img:require("../assets/img/book3.png"),
                //     author:" [法]斯塔夫·勒庞 ",
                //     title:"乌合之众:大众心理研究",
                //     price:12,
                //     num:1,
                // },
            ],

        };
    },

    methods: {

        //购买
        buybox() {
            if (this.checkedAll) {
                this.$router.push("/SettleMent")
                window.localStorage.setItem("total", JSON.stringify(this.total))
                // window.localStorage.setItem("num", JSON.stringify(this.lists.num))
            } else {
                this.$toast("请选择商品");
            }

        },


        // 返回
        back() {
            this.$router.back()
        },



        //加号功能
        add(bookId) {
            let index = this.lists.findIndex(item => item.bookId == bookId);//获取下标
            this.lists[index].num += 1;
        },

        //减号功能
        sub(bookId) {
            let index = this.lists.findIndex(item => item.bookId == bookId);//获取下标
            let num = this.lists[index].num;
            num--;
            this.lists[index].num = num < 1 ? 1 : num; //判断是否小于1

        },


        // 切换编辑
        editable() {
            this.text = ""
            this.ISshow = false

        },

        //切换完成
        finishbox() {
            this.text = "全选"
            this.ISshow = true
        },



        // 显示删除
        del() {
            this.show = true

        },

        // 确定删除
        dell() {

            this.dataList = this.lists.filter(item => {
                return !item.checked
            })

            console.log("数量:", this.dataList)
            this.lists = this.dataList

            // this.lists.forEach(item => {
            //     if (item.checked) {
            //         this.lists.splice(item)
            //     }
            // })

            window.localStorage.setItem("linkMath", JSON.stringify(this.lists))
            this.show = false
            console.log("确定")
            this.text = "全选"
            this.ISshow = true

        },


        //取消
        consider() {
            this.show = false
            console.log("返回")
        }


    },

    computed: {

        number() {
            return this.lists.reduce((nums, item) => {
                if (item.checked) {//false 未完成
                    return nums += 1;
                }
                return nums;
            }, 0)
        },


        // 计算价格
        total: function () {
            return this.lists.reduce(function (total, item) {
                if (item.checked) {
                    return total += item.vipPrice * item.num;
                } else {
                    return total;
                }
            }, 0)

        },


        // 全选功能
        checkedAll: {
            get() {
                return this.lists.every(item => {
                    return item.checked;  //只要有一个false不满足条件
                })
            },

            set(value) {
                console.log("位置",value)
                this.lists.forEach(item => {
                    item.checked = value
                })
            }


        }

    },
    created() {
        this.lists = JSON.parse(window.localStorage.getItem("linkMath"))
        // console.log(this.list)
        // this.lists.push(this.list)
        console.log("购物车", this.lists)
        console.log("购物车2", this.lists.num)
    }


}
</script>

<style lang="scss" >
.PopFrame {
  width: 202px;
  height: 170px;
  background-color: #fff;
  padding-top: 20px;
  border-radius: 6px;

  p {
    font-size: 14px;
    color: #000;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

  .determine {
    // padding: 20px 50px;
    color: #fff;
    font-size: 12px;
    background-color: #527e69;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 0px;
    width: 200px;
    border-radius: 50px;
  }

  .consider {
    // padding: 20px 50px;
    color: #527e69;
    background-color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 10px 0px;
    width: 198px;
    border-radius: 50px;
    border: 1px solid #527e69;
  }
}

* {
  padding: 0px;
  margin: 0px;
}

ul,
ol {
  list-style: none;
}

body {
}

a {
  text-decoration: none;
}

.ShoppingCar {
  .headerbox {
    width: 100%;
    position: fixed;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 14px 4px 12px;
      background-color: #fff;

      .img {
        .icon {
          width: 20px;
          height: 20px;
        }
      }

      .text {
        font-size: 20px;
        color: #09172f;
      }

      .righttext {
        font-size: 15px;
        color: #282828;
      }
    }
  }

  .navbox {
    padding-top: 50px;

    .nav {
      display: flex;
      padding-left: 39px;

      .txt {
        font-size: 15px;
        color: #aab3c4;
        margin-right: 38px;
      }

      .con {
        color: #468c6a;
      }
    }

    .bookbigbox {
      margin-top: 10px;

      .bookbox {
        display: flex;
        background-color: #fff;
        margin: 0px 14px;
        padding: 16px 10px;

        .check {
          display: flex;
          padding-right: 4px;

          input {
            color: #fff;
            background-color: #1989fa;
            border-color: #1989fa;
            border-radius: 50%;
          }
        }

        .img {
          img {
            width: 62px;
            height: 90px;
            border-radius: 4px;
          }
        }

        .textbox {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 6px;

          .title {
            p {
              font-size: 16px;
              color: #09172f;
              font-weight: bold;
            }

            .author {
              font-size: 13px;
              color: #a5afc1;
            }
          }

          .pricebox {
            display: flex;
            justify-content: space-between;

            .price {
              color: #f73e2e;
              font-size: 16px;
            }

            .number {
              .inputbox {
                input {
                  box-sizing: border-box;
                  width: 32px;
                  height: 28px;
                  margin: 0 2px;
                  padding: 0;
                  color: #323233;
                  font-size: 14px;
                  line-height: normal;
                  text-align: center;
                  vertical-align: middle;
                  border: 0;
                  border-width: 1px 0;
                  border-radius: 0;
                }

                button {
                  position: relative;
                  box-sizing: border-box;
                  width: 28px;
                  height: 28px;
                  margin: 0;
                  padding: 0;
                  border: 2px solid #f1f1f1;
                  background-color: #fff;
                }
              }
            }
          }
        }
      }
    }

    .footerbox {
      width: 100%;
      position: fixed;
      bottom: 0px;

      .footer {
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        padding: 6px 10px;
        align-items: center;

        .left {
          display: flex;

          .check {
            padding-top: 3px;
            font-size: 13px;
            display: flex;

            input {
              margin-right: 4px;
            }

            .bon {
              font-size: 12px;
            }
          }

          .total {
            font-size: 13px;
            color: #132037;
            margin-left: 10px;

            span {
              font-size: 16px;
              color: #f84839;
            }
          }
        }

        .right {
          padding: 10px 30px;
          background-color: #d57c5b;
          color: #fdfaf9;
          border-radius: 30px;
        }
      }
    }

    .animebox {
      .anime {
        display: flex;
        padding-top: 90px;
        justify-content: space-around;
        margin-bottom: 38px;

        .img {
          img {
            width: auto;
            height: 166px;
          }
        }
      }

      .textbox {
        .txtbox {
          display: flex;
          justify-content: space-around;

          .box {
            p {
              color: #cbd0da;
              font-size: 20px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>